<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - <span class="subitem">Lazy</span></span>
        <span>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking
             onLazyLoad callback everytime paging, sorting and filtering happens. Sample belows imitates lazy paging by using an in memory list. 
             It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator 
             displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars" [lazy]="true" [rows]="10" [paginator]="true" 
                [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
        <p-header>List of Cars</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablelazydemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablelazydemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableLazyDemo implements OnInit &#123;

    datasource: Car[];
    
    cars: Car[];
    
    totalRecords: number;

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        //datasource imitation
        this.carService.getCarsLarge().then(cars => &#123;
            this.datasource = cars; 
            this.totalRecords = this.datasource.length;
            this.cars = this.datasource.slice(0, 10);
        &#125;);
    &#125;
    
    loadCarsLazy(event: LazyLoadEvent) &#123;
        //in a real application, make a remote request to load data using state metadata from event
        //event.first = First row offset
        //event.rows = Number of rows per page
        //event.sortField = Field name to sort with
        //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
        //filters: FilterMetadata object having field as key and filter value, filter matchMode as value
        
        //imitate db connection over a network
        setTimeout(() => &#123;
            if(this.datasource) &#123;
                this.cars = this.datasource.slice(event.first, (event.first + event.rows));
            &#125;
        &#125;, 250);
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatablelazydemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablelazydemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars" [lazy]="true" [rows]="10" [paginator]="true" 
            [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)"&gt;
    &lt;p-header&gt;List of Cars&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>